<template>
    <el-color-picker
            v-model="colorData"
            show-alpha
            :predefine="predefineColors"
            @change="changeColor"
    >
    </el-color-picker>
</template>

<script>
    export default {
        name: 'colorPicker',
        props: {
          color: {
              type: String,
              default: function () {
                  return 'rgba(225, 225, 225, 0.6)'
              }
          }
        },
        watch: {
            color: function (val) {
                if (val) {
                    this.colorData = val
                }
            }
        },
        data() {
            return {
                colorData: this.color,
                predefineColors: [
                    'rgba(255, 69, 0, 0.68)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsl(181, 100%, 37%)',
                    '#C7232E'
                ]
            }
        },
        methods: {
            changeColor(val) {

                this.$emit('change', val)

            }
        }
    }
</script>

<style lang="stylus" scoped>
    .el-color-picker
        height: 30px
        vertical-align: middle
        z-index: 2 !important
    >>>.el-color-picker__trigger
        width: 76px
        height: 30px
        padding: 0
        border-radius: 0
        border: 1px solid #284689
    >>>.el-color-picker__color
        border: none
    >>>.el-color-picker__icon,
    >>>.el-color-picker__empty
        display: none
    
</style>
